<template>
  <div>
    <hd-tab :tabs="tabs"></hd-tab>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>桌台管理</span>
      </div>
      <div class="flex flex-wrap">
        <el-card v-for="(desk,index) in desks" :key="index" class="mx-4 my-2" shadow="never">
          <div slot="header" class="clearfix ">
            <el-image
                :src="desk.image"
                fit="contain"
                style="width: 150px; height: 150px"></el-image>
          </div>
          <div class="flex justify-between items-center">
            <el-tag type="success">{{ desk.name }}</el-tag>

            <el-dropdown size="mini" type="primary">
              <el-button size="small" type="primary">
                操作<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <div class="cursor-pointer hover:bg-gray-100 text-gray-600 px-3 py-2 text-sm" @click="edit(desk)">编辑
                </div>
                <div class="dropdown-divider"></div>
                <div class="cursor-pointer px-3 hover:bg-gray-100 py-2 text-sm text-gray-600" @click="del(desk)">删除
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-card>

      </div>
    </el-card>
  </div>
</template>

<script>
import tabs from './tabs'

export default {
  data() {
    return {
      tabs,
      desks: []
    }
  },
  created() {
    this.load();
  },
  methods: {
    async load() {
      this.desks = await this.axios.get('admin/desk');
    },
    edit(desk) {
      this.$router.push({name: 'admin.desk.edit', params: {id: desk.id}})
    },
    del(desk) {
      this.$confirm(`确定删除【${desk.name}】吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(async () => {
        await axios.delete(`admin/desk/${desk.id}`)
        await this.load()
      })
    }
  }
}
</script>

<style scoped>

</style>